<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    var svg = `<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
      <svg 
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        class="watermark-svg"
        viewBox="0 0 35 35"
        width="200"
        height="200"
        >
        <g class="path" transform="rotate(-45, 17.5, 17.5)" fill="#3E3E50" font-family="Segoe UI,Arial">
          <text text-anchor="start" x="25%" y="50%" font-size="4">watermark</text>
          <text text-anchor="start" x="25%" y="50%" dy="-3" dx="0" font-size="2">development</text>
          <text text-anchor="start" x="25%" y="50%" dy="2" dx="0" font-size="2">2019-01-23 12:45:33</text>
        </g>
      </svg>`

    var dataUrl = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg)))
    console.log(dataUrl)
    // document.documentElement.style.backgroundImage = `url(${dataUrl})`
    // document.documentElement.style.backgroundSize = '200px 200px'
  
    var img = new Image()
    img.width = 200
    img.height = 200
    img.onload = function () {
      console.log(img)
      document.body.appendChild(img)

      var canvas = document.createElement('canvas')
      canvas.width = 200
      canvas.height = 200

      var ctx = canvas.getContext('2d')
      ctx.fillStyle = 'none'
      ctx.drawImage(img, 0, 0, 200, 200)

      document.body.appendChild(canvas)

      const data = canvas.toDataURL('image/png')

      console.log(data)

      document.documentElement.style.backgroundImage = `url(${data})`
    }

    img.src = dataUrl
    // img.src = './20190124202459.png'
  </script>
</body>
</html>